import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_li_ke_jie/core/utils/toast.dart';
import 'package:flutter_li_ke_jie/entity/app_goods.dart';
import 'package:flutter_li_ke_jie/router/router.dart';
import 'package:flutter_li_ke_jie/ui/goods/goods_info_page.dart';
import 'package:flutter_li_ke_jie/ui/home/vip_model.dart';
import 'package:flutter_li_ke_jie/utils/navigator_util.dart';

import '../../core/interface/common_interface.dart';
import '../../style/common_color.dart';
import '../../utils/img_util.dart';


///会员已支付
class VipPlayFragment extends StatefulWidget {
  const VipPlayFragment({Key? key}) : super(key: key);

  @override
  _VipPlayFragmentState createState() => _VipPlayFragmentState();
}

class _VipPlayFragmentState extends State<VipPlayFragment> with CommonInterface<VipModel>{
  late VipModel _vipModel;
  bool _isLoadData = false;//是否已经加载数据
  @override
  Widget build(BuildContext context) {
    _vipModel = model(context);
    if(!_isLoadData){
      _vipModel.getGoodsList();
      _isLoadData = true;
    }
    return Scaffold(
      body: Container(
        color: color_1b2a45,
        child: RefreshIndicator(
          onRefresh: _onRefresh,
          child: _content(),
        ),
      ),
    );
  }


  //刷新
  Future<void> _onRefresh() async {
    //查询首页产品
    _vipModel.getGoodsList();
  }

  //内容去
  Widget _content(){
    return ListView(
      padding: EdgeInsets.only(top: 0),
      children: [
        //头部
        Image.asset(ImageUtil.loadLocalImg("vip_bg_big.png")),
        Container(
          padding: EdgeInsets.only(left: 10,right: 10,top: 30),
          decoration: BoxDecoration(
            color: color_f7,
            borderRadius: BorderRadius.only(topLeft: Radius.circular(15),topRight: Radius.circular(15)),
          ),
          child: Column(
            children: [
              //标题
              _contentTitle(),
              SizedBox(height: 20,),
              //特权卡片
              _privilegeCard(),
              SizedBox(height: 20,),
              //生活美食
              _lifeCard(),
              SizedBox(height: 10,),
              _musicCard(),
              SizedBox(height: 10,),
              _videoCard(),
              SizedBox(height: 10,),
            ],
          ),
        )
      ],
    );
  }

  //内容标题
  Widget _contentTitle(){
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Image.asset(ImageUtil.loadLocalImg("vip_line_right.png"),height: 10,),
        SizedBox(width: 10,),
        Text("会员特权",style: TextStyle(color: color_1e,fontSize: 18,fontWeight: FontWeight.bold),),
        SizedBox(width: 10,),
        Image.asset(ImageUtil.loadLocalImg("vip_line_left.png"),height: 10,),
      ],
    );
  }

  //特权卡片
  Widget _privilegeCard(){
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        SizedBox(width: 10,),
        Expanded(child: Container(
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(10))
          ),
          child: Column(
            children: [
              Image.asset(ImageUtil.loadLocalImg("vip_product.png"),width: 50,height: 50,),
              SizedBox(height: 5,),
              Text("专属产品",style: TextStyle(color: color_1e,fontSize: 16,fontWeight: FontWeight.bold),),
              SizedBox(height: 5,),
              Text("20+会员产品",style: TextStyle(color: color_999,fontSize: 14),),
            ],
          ),
        ),flex: 1,),
        SizedBox(width: 10,),
        Expanded(child: Container(
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(10))
          ),
          child: Column(
            children: [
              Image.asset(ImageUtil.loadLocalImg("vip_right.png"),width: 50,height: 50,),
              SizedBox(height: 5,),
              Text("生活权益",style: TextStyle(color: color_1e,fontSize: 16,fontWeight: FontWeight.bold),),
              SizedBox(height: 5,),
              Text("吃喝玩乐省品",style: TextStyle(color: color_999,fontSize: 14),),
            ],
          ),
        ),flex: 1,),
        SizedBox(width: 10,),
        Expanded(child: Container(
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(10))
          ),
          child: Column(
            children: [
              Image.asset(ImageUtil.loadLocalImg("vip_service.png"),width: 50,height: 50,),
              SizedBox(height: 5,),
              Text("服务优先",style: TextStyle(color: color_1e,fontSize: 16,fontWeight: FontWeight.bold),),
              SizedBox(height: 5,),
              Text("专属服务特权",style: TextStyle(color: color_999,fontSize: 14),),
            ],
          ),
        ),flex: 1,),
        SizedBox(width: 10,),
      ],
    );
  }

//商品网格布局item卡片
  Widget _itemCard(AppGoods appGoods){
    return GestureDetector(
      onTap: (){
        Navigator.of(context).push(
            MaterialPageRoute(
                builder: (context)=>GoodsInfoPage(appGoods)
            )
        );
      },
      child:Container(
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(10)),
            image: DecorationImage(
              image: AssetImage(appGoods.bgType==0?"images/3.0x/vip_green_card.png":appGoods.bgType==1?"images/3.0x/vip_blue_card.png":"images/3.0x/vip_red_card.png",),
              fit: BoxFit.fill, // 完全填充
            )
        ),
        child: Column(
          children: [
            SizedBox(height: 20,),
            Image.network(appGoods.icon,width: 60,height: 60,),
            SizedBox(height: 20,),
            Text("${appGoods.name}",style: TextStyle(color: color_1e,fontSize: 16,fontWeight: FontWeight.bold),),

          ],
        ),
      )
    );
  }

  //商品网格布局
  Widget _goodsGridView(List<AppGoods> list){
    return GridView.builder(
        padding: EdgeInsets.only(top: 10),
        itemCount:list.length,
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
          childAspectRatio: 0.8
        ) ,
        itemBuilder: (BuildContext context, int index) {
          return _itemCard(list[index]);
        }
    );
  }
  //生活美食
  Widget _lifeCard(){
      return Column(
        children: [
          Row(
            children: [
              Image.asset(ImageUtil.loadLocalImg("vip_food.png"),height: 24,width: 24,),
              SizedBox(width: 5,),
              Text("生活美食会员",style: TextStyle(color: color_1e,fontSize: 16,fontWeight: FontWeight.bold),)
            ],
          ),
          _goodsGridView(_vipModel.lifeGoods)

        ],
      );
  }

  //音频权益会员
  Widget _musicCard(){
    return Column(
      children: [
        Row(
          children: [
            Image.asset(ImageUtil.loadLocalImg("vip_music.png"),height: 24,width: 24,),
            SizedBox(width: 5,),
            Text("音频权益会员",style: TextStyle(color: color_1e,fontSize: 16,fontWeight: FontWeight.bold),)
          ],
        ),
        _goodsGridView(_vipModel.musicGoods)
      ],
    );
  }

  //视频权益会员
  Widget _videoCard(){
    return Column(
      children: [
        Row(
          children: [
            Image.asset(ImageUtil.loadLocalImg("vip_video.png"),height: 24,width: 24,),
            SizedBox(width: 5,),
            Text("视频权益会员",style: TextStyle(color: color_1e,fontSize: 16,fontWeight: FontWeight.bold),)
          ],
        ),
        _goodsGridView(_vipModel.videoGoods)
      ],
    );
  }
}
